<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点击登入</button>
</body>

</html>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->
<script>
    //解决跨域的方式
    //1.使用cross浏览器插件
    //2.使用jsonp 只支持get请求
    //原理:动态创建script标签,通过scirpt的src属性来访问后端接口,实现跨域,需要传递本地一个回调函数的名字

    function callback(res) { //jsonp的回调函数
        console.log(res);//从服务端得到的响应结果
    }

    btn.onclick = function () {
        let jsonpScript = document.getElementById("jsonp");
        if(jsonpScript){//如果已经存在就移除掉
            document.documentElement.removeChild(jsonpScript)
        }
        //重新动态创建script
        let script = document.createElement("script")
        script.id = 'jsonp'
        script.src = "http://localhost:3000/jsonp?cb=callback"

        //把script添加到页面上

        document.documentElement.appendChild(script)
        setTimeout(()=>{
            document.documentElement.removeChild(script)
        },2000)
    }


    //3.后端响应头 access-control-allow-origin
    // btn.onclick = function(){
    //     $.ajax({
    //         type:"post",
    //         url: "http://localhost:3000/users/login",
    //         data: {
    //             username: "lbw",
    //             password: "555"
    //         }
    //     })
    //         .then(res => {
    //             console.log(res);
    //         })
    // }
</script>